<template>
  <div id='player'>
    <div class="normal-player" @click='lyricShowToggle'>

      <div class="top">
        <h1 class="title text-danger">{{musicData.musicName}}</h1>
        <h6 class="subtitle text-warning">{{musicData.singerName}}</h6>
      </div>
      <div class="middle" >
        <div class="middle-l" ref="middleL" v-show='lyricShow'>
          <div class="cd-wrapper" ref="cdWrapper">
            <div class="cd" :class="plays">
              <img class="image" v-lazy="musicData.musicPic">
            </div>
          </div>
          <div class="playing-lyric-wrapper">
            <div class="playing-lyric"></div>
          </div>
        </div>
        <div class="middle-r " v-show='!lyricShow' >
          <div class="lyric-wrapper" ref="lyricList">
            <div v-if="lyric" >
              <p ref="lyricLine"
                 class="text"
                 :class="{'current': lineNum ===index}"
                 v-for="(line,index) in lyric.lines">{{line.txt}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="background">
        <img  v-lazy="musicData.musicPic">
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'

  export default {
    data() {
      return {
        lyricShow:true
      }
    },
    props: {
      lineNum: {   //当前播放的歌词
        type:Number,
        default:0
      }
    },
    mounted() {
    },
    methods: {
      lyricShowToggle() {
        this.lyricShow=!this.lyricShow
      }

    },
    computed: {
      plays(){
        return this.playing? 'play':'play pause'
      },
      ...mapGetters([
        'musicData',
        'playing',
        'lyric'
      ])
    },
    watch: {
      lineNum(newLine,oldLine) {
//    监听当前播放歌词的行数 当歌词超过7行时每次页面向上滚动一行的距离
        this.$refs.lyricList.scrollTo(0, newLine*10)
        if(newLine>7){
          let line=newLine-7
          this.$refs.lyricList.scrollTo(0, line*42)
        }else {
          this.$refs.lyricList.scrollTo(0, 0)
        }
      }
    }

  }
</script>
<style scoped lang='stylus' rel='stylesheet/stylus'>
  @keyframes rotate
    0%
      transform: rotate(0)
    100%
      transform: rotate(360deg)
  #player
    height: 100%
    font-family '楷体'
    .normal-player
      height: 100%
      .background
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0.6;
        filter: blur(20px);
        img
          display inline-block
          width: 100%
          height: 100%
    .top
      position: relative
      margin-bottom: 20px
      z-index 9
      .title
        width: 100%
        margin: 0 auto
        line-height: 60px
        text-align: center
        no-wrap()
        font-size:36px
      .subtitle
        line-height: 20px
        text-align: center
        font-size 20px
    .middle
      width: 100%
      height: 100%
      white-space: nowrap
      font-size: 0
      margin-top: 5%
      position relative
      z-index: 9
      ::-webkit-scrollbar
      {
        width: 0;
        height: 0;
        display: none;
      }
      .middle-l
        display: inline-block
        vertical-align: top
        position: relative
        width: 100%
        height: 0
        padding-top: 80%
        .cd-wrapper
          position: absolute
          left: 10%
          top: 0
          width: 80%
          height: 100%
          .cd
            width: 100%
            height: 100%
            box-sizing: border-box
            border: 10px solid rgba(255, 255, 255, 0.1)
            border-radius: 50%
            &.play
              animation: rotate 20s linear infinite
            &.pause
              animation-play-state: paused
            .image
              position: absolute
              left: 0
              top: 0
              width: 100%
              height: 100%
              border-radius: 50%
        .playing-lyric-wrapper
          width: 80%
          margin: 30px auto 0 auto
          overflow: hidden
          text-align: center
          .playing-lyric
            height: 20px
            line-height: 20px
            font-size: $font-size-medium
            color: $color-text-l
      .middle-r
        display: inline-block
        vertical-align: top
        width: 100%
        height: 100%
        overflow-y: scroll
        .lyric-wrapper
          height: 100%
          width: 80%
          margin: 0 auto
          overflow-y: scroll
          text-align: center
          padding-bottom:180px
        .text
            line-height: 32px
            color: rgba(255,255,255,0.5)
            font-size: 16px
            &.current
              color: orangered
</style>
